JavaScript Nullish Coalescing: Tildeling av standardverdier vs. håndtering av 'falsy' verdier

JavaScript-utviklere må ofte tildele standardverdier til variabler når den opprinnelige verdien mangler eller er ugyldig. Tradisjonelt ble den logiske ELLER-operatoren (||) brukt til dette formålet. Imidlertid gir nullish coalescing-operatoren (??), introdusert i ECMAScript 2020, en mer presis og pålitelig løsning, spesielt når man håndterer 'falsy' verdier. Denne omfattende guiden utforsker nyansene ved nullish coalescing, sammenligner den med den logiske ELLER-operatoren, og viser dens anvendelser i ulike scenarioer.

Forstå Nullish Coalescing (??)

Nullish coalescing-operatoren (??) returnerer sin høyre operand når den venstre operanden er null eller undefined. Ellers returnerer den sin venstre operand. Enkelt sagt, den gir en standardverdi kun når variabelen er eksplisitt null eller undefined.

Syntaks:

leftOperand ?? rightOperand

Eksempel:

            const name = null ?? "Gjest";
console.log(name); // Output: "Gjest"

const age = undefined ?? 25;
console.log(age); // Output: 25

const score = 0 ?? 100;
console.log(score); // Output: 0

            

              
                Copy
              
            
          

Forskjellen mellom Nullish Coalescing (??) og Logisk ELLER (||)

Den logiske ELLER-operatoren (||) gir også en måte å tildele standardverdier på. Den behandler imidlertid enhver falsy verdi (false, 0, '', NaN, null, undefined) som ekvivalent med null eller undefined, noe som potensielt kan føre til uventet oppførsel.

Eksempel med Logisk ELLER:

            const quantity = 0 || 10;
console.log(quantity); // Output: 10 (uventet, siden 0 er 'falsy')

const message = '' || "Ingen melding";
console.log(message); // Output: "Ingen melding" (uventet, siden '' er 'falsy')

            

              
                Copy
              
            
          

Eksempel med Nullish Coalescing:

            const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (korrekt, siden 0 ikke er null eller undefined)

const message = '' ?? "Ingen melding";
console.log(message); // Output: "" (korrekt, siden '' ikke er null eller undefined)

            

              
                Copy
              
            
          

Som du kan se, utløses nullish coalescing-operatoren kun når den venstre operanden er eksplisitt null eller undefined, og bevarer 'falsy' verdier som 0 og ''.

Bruksområder for Nullish Coalescing

Nullish coalescing er spesielt nyttig i scenarioer der du trenger å skille mellom en manglende verdi (null eller undefined) og en gyldig 'falsy' verdi.

1. Håndtering av konfigurasjonsalternativer

Når man håndterer konfigurasjonsalternativer, kan det være ønskelig å angi standardverdier for innstillinger som ikke er eksplisitt definert. Bruk av ?? sikrer at gyldige 'falsy' verdier (f.eks. 0 for en tidsavbruddsverdi) ikke ved et uhell blir erstattet med standardverdien.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Bruk 0 hvis timeout er eksplisitt satt, ellers bruk 5000 som standard
const maxRetries = config.maxRetries ?? 3; // Bruk 3 hvis maxRetries er null eller undefined
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; //Bruk standard endepunkt hvis apiEndpoint er null eller undefined

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Output: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. Arbeid med API-responser

API-responser inneholder ofte felt som kan mangle eller har eksplisitt satte 'falsy' verdier. Nullish coalescing lar deg håndtere disse scenarioene på en elegant måte, og sikrer at du kun gir standardverdier når et felt virkelig mangler.

Eksempel: En forenklet API-respons som representerer en bruker:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Ukjent Bruker";
const userAge = user.age ?? "Alder ikke tilgjengelig";
const country = user.countryCode ?? "US"; //Bruk 'US' som standard hvis null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; //Bruker 'true' som standard hvis null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; //Bruk standardbilde hvis null/undefined

console.log(`Name: ${displayName}`); // Output: Name: Alice
console.log(`Age: ${userAge}`); // Output: Age: 30
console.log(`Country: ${country}`); // Output: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Output: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); //Output: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

I dette eksempelet bruker vi "US" som standard kun hvis `countryCode` er eksplisitt `null` eller `undefined`. Hvis API-et returnerte `countryCode: ""`, ville den tomme strengen blitt bevart, noe som gjenspeiler brukerens faktiske (men potensielt manglende) landskode.

3. Angi reserveverdier i funksjoner

Når man skriver funksjoner som godtar valgfrie parametere, kan nullish coalescing brukes for å angi standardverdier for manglende argumenter.

            function greet(name, greeting) {
  const displayName = name ?? "Gjest";
  const salutation = greeting ?? "Hallo";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "God morgen")); // Output: God morgen, Bob!
console.log(greet(null, undefined)); // Output: Hallo, Gjest!
console.log(greet("", "")); // Output: , !
console.log(greet("", null)); // Output: Hallo, !

            

              
                Copy
              
            
          

Denne tilnærmingen sikrer at funksjonen alltid har en verdi å jobbe med, selv om den som kaller funksjonen ikke oppgir alle argumentene.

4. Internasjonalisering og lokalisering (i18n/l10n)

Når man jobber med internasjonaliserte applikasjoner, har man ofte forskjellige oversettelser for ulike strenger. Nullish coalescing kan brukes for å gi en standardoversettelse hvis en spesifikk oversettelse mangler for et bestemt språk.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Oversettelse mangler for nøkkel: ${key}`;
}

console.log(translate("greeting", "fr")); // Output: Bonjour
console.log(translate("farewell", "fr")); // Output: Oversettelse mangler for nøkkel: farewell
console.log(translate("greeting", "de")); // Output: Hello (faller tilbake til engelsk)

            

              
                Copy
              
            
          

I dette eksempelet prøver vi først å finne oversettelsen for det angitte språket og nøkkelen. Hvis den mangler, faller vi tilbake på den engelske oversettelsen. Hvis selv den engelske oversettelsen mangler, returnerer vi en melding som indikerer at oversettelsen mangler.

5. Håndtering av brukerinput i skjemaer

Ved behandling av brukerinput fra skjemaer kan man støte på tilfeller der visse felt er tomme eller inneholder tomme strenger. Å bruke nullish coalescing-operatoren sammen med optional chaining-operatoren (?.) kan være svært effektivt når man håndterer dypt nestet brukerinput.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "No Name Provided";
const safeUserName = formData?.user?.name ?? "No Name Provided";
const userCity = formData?.user?.address?.city ?? "By ukjent";
const userCountry = formData?.user?.address?.country ?? "Land ukjent";

console.log(userName); // No Name Provided (fordi tom streng er 'falsy')
console.log(safeUserName); // "" (fordi safeUserName eksplisitt sjekker for null eller undefined)
console.log(userCity); // By ukjent
console.log(userCountry); // Land ukjent

            

              
                Copy
              
            
          

Operatorprioritet og kombinasjon med andre operatorer

Nullish coalescing-operatoren har en relativt lav operatorprioritet. Dette betyr at du ofte må bruke parenteser for å sikre at den blir evaluert riktig, spesielt når den kombineres med andre operatorer som logisk OG (&&) eller logisk ELLER (||).

Viktig merknad: Du kan ikke kombinere ?? direkte med && eller || uten å bruke parenteser. Dette er for å unngå tvetydighet i rekkefølgen av operasjoner.

Korrekt bruk:

            const value = (someValue ?? 10) && true;
console.log(value); //Output: true hvis someValue ikke er null eller undefined, ellers false

const result = (null ?? 5) + 10; // Output: 15

            

              
                Copy
              
            
          

Feil bruk (Vil resultere i en SyntaxError):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Nettleserkompatibilitet

Nullish coalescing-operatoren (??) er et relativt nytt tillegg til JavaScript. Sørg for at nettleserne du retter deg mot, støtter den. De fleste moderne nettlesere støtter den, men eldre nettlesere kan kreve transpilerering med verktøy som Babel.

For å sjekke nettleserkompatibilitet kan du se på ressurser som MDN Web Docs.

Beste praksis for bruk av Nullish Coalescing

• Bruk den når du trenger å skille mellom manglende verdier (null eller undefined) og gyldige 'falsy' verdier.
• Bruk alltid parenteser når du kombinerer ?? med && eller || for å unngå syntaksfeil og sikre korrekt evaluering.
• Vær oppmerksom på nettleserkompatibilitet og vurder transpilerering om nødvendig.
• Dokumenter bruken av ?? tydelig for å forbedre lesbarheten i koden.
• Test koden din grundig for å sikre at standardverdier tildeles korrekt i alle scenarioer.

Konklusjon

Nullish coalescing-operatoren (??) er et kraftig og verdifullt tillegg til JavaScript-språket. Den gir en mer presis og pålitelig måte å tildele standardverdier på sammenlignet med den tradisjonelle logiske ELLER-operatoren (||), spesielt når man håndterer 'falsy' verdier. Ved å forstå dens nyanser og beste praksis kan du skrive renere, mer robust og mer vedlikeholdbar JavaScript-kode. Vurder å ta i bruk ?? i prosjektene dine for å forbedre klarheten og nøyaktigheten i tildelingene av standardverdier. Husk å teste koden din grundig på tvers av ulike nettlesere og vurdere transpilerering for eldre miljøer.

Denne guiden ga en omfattende oversikt. Eksperimenter med ?? i ulike sammenhenger for å fullt ut forstå dens kapabiliteter og begrensninger, og forbedre kontinuerlig din forståelse gjennom praktisk anvendelse.